<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <title>INSTAR-登录</title>
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
</head>
<link rel="stylesheet" href="../static/css/login.css" th:href="@{/css/login.css}">
<link rel="stylesheet" href="../static/css/bootstrapValidator.css" th:href="@{/css/bootstrapValidator.css}">
<body>
<br><br><br><br>
<!--------------- 登录部分begin ------------------>
<section id="lk_login">
    <div class="container">
       <div class="row">

           <!--左半部分-->
            <div class=" col-md-6 col-sm-12 d-flex align-items-center justify-content-center shadow rounded bg_here" >
                <div>
                    <h2 style="color: white">
                        欢迎登录
                    </h2>

                <h3 style="color: white">INSTAR系统</h3>
                </div>
            </div>

           <!--右半部分-->
           <div class="col-md-6 col-sm-12 justify-content-center align-self-center shadow rounded " >
               <form class="mt-5 mb-5" method="post" th:action="@{/login}">
                   <div class="form-group mt-4">
                       <label for="username">用户名</label>
                       <input type="text" class="form-control" id="username" name="username" aria-describedby="usernamehelp" placeholder="Enter your username">
                   </div>
                   <div class="form-group mt-4">
                       <label for="password">密码</label>
                       <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                   </div>
                   <button type="submit" class="btn btn-primary mt-4">登录</button>
               </form>
               <div class="mb-4"><span>没有账号？</span><a href="/register" th:href="@{/register}">点我注册</a></div>
           </div>

       </div>
    </div>

</section>

<!--------------- 登录部分end ------------------>


<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/js/jquery-3.3.1.js"></script>
<script src="../static/js/popper.js"></script>
<script src="../static/js/bootstrap.js"></script>
<!--/*/</th:block>/*/-->
<script src="../static/js/bootstrapValidator.js" th:src="@{/js/bootstrapValidator.js}"></script>
<!--用户输入的合法性检查-->
<script>
    $(document).ready(function() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });
    });

</script>

</body>
</html>